
import React, { useState, useRef, useEffect } from 'react';
import { Input, Button, Form, InputNumber, Divider, Pagination, Empty } from "antd";
import styles from "./index.less";
import { SearchOutlined, SwapLeftOutlined } from '@ant-design/icons';
import StandardFormRow from '../components/StandardFormRow';
import TagSelect from '../components/TagSelect';
import { connect } from 'umi';
import {province,umProductAll} from "@/services/basic";
import imgUrl from "@/assets/contactbac.jpg";
import { Icon } from '@ant-design/compatible';
import ShowWay from "@/components/Showway";
const spotGoods = [
    {
        label: "是",
        value: 1
    },
    {
        label: "否",
        value: 0
    }
];

const Prod = (props) => {
    const { showWay, dispatch } = props;
    const formRef = useRef();
    const [searchForm, cs] = useState({
        isClick: false,
        priceSort: "",
        isCashSale: "",
        provinceIdList: [],
        minPrice: "",
        maxPrice: "",
        minOrderQuantity: "",
        seoKeywordSearch: "",
        pageIndex: 1,
        pageSize: 15
    }),
        [isDefault, cid] = useState(false),
        [provinceList,cpr]=useState([]),
        [productList,cpl]=useState([]);
    const changeForm = (val, all, type) => {
        if (type == "reset") {
            cs((searchForm) => {
                for (let i in searchForm) {
                    if (i == "isClick") {
                        searchForm[i] = false
                    } else if (i == "pageIndex") {
                        searchForm[i] = 1;
                    } else if (i == "pageSize") {
                        searchForm[i] = 15;
                    }else if(i=="provinceIdList"){
                        searchForm[i]=[]
                    } else {
                        searchForm[i] = ""
                    }
                }
                return { ...searchForm }
            })
            formRef?.current?.resetFields()
        }
        let allValuese = JSON.parse(JSON.stringify(all));
        for (let i in allValuese) {
            if (i == 'isCashSale') {
                if (allValuese[i]?.length > 1 || allValuese[i]?.length == 0) {
                    allValuese[i] = ""
                } else if (allValuese[i]?.length == 1) {
                    allValuese[i] = allValuese[i][0]
                }
            }
        }
        cs(searchForm => (
            {
                ...searchForm,
                ...allValuese
            }
        ))
    },
    changePrice = (e, field) => {
        cs(searchForm => {
            for (let i in searchForm) {
                if (i == field) {
                    searchForm[i] = e;
                }
            }
            return { ...searchForm }
        })
    };
    useEffect(()=>{
        province({}).then(res=>{
            if(res.code=="0000"){
                let list = res?.data?.dataList || [];
                cpr(list)
            }
        })
    },[]);
    useEffect(()=>{
        let newParams = {...searchForm};
        delete newParams.isClick;
        umProductAll(newParams).then(res=>{
            if(res.code=="0000"){
                let list = res?.data?.page?.list || [];
                cpl(list);
            }
            
        })
        
    },[searchForm]);
    return (
        <div>
            <div className="content">
                <div className="row ">
                    <Input
                        placeholder="请输入关键词搜索"
                        allowClear
                        onChange={(e) => {
                            cs({
                                ...searchForm,
                                seoKeywordSearch: e.target.value
                            })
                        }}
                        prefix={<SearchOutlined style={{ marginLeft: 3 }} />}
                        size="large"
                        value={searchForm.seoKeywordSearch}
                    />
                    <div className="row">
                        <Button size="large" type="primary" style={{ borderRadius: 0 }}>搜索</Button>
                        <Button size="large" style={{ borderRadius: 0 }} onClick={() => {
                            changeForm({}, {}, "reset")
                        }}>重置</Button>
                    </div>
                </div>
                <div className={styles.options}>
                    <Form onValuesChange={changeForm} ref={formRef}>
                        <StandardFormRow
                            title="是否现货"
                            block
                            style={{
                                border: "none"
                            }}
                        >
                            <Form.Item name="isCashSale" style={{ marginBottom: 10 }}>
                                <TagSelect expandable={false} hideCheckAll={true}>
                                    {
                                        spotGoods?.map(el => {
                                            return (
                                                <TagSelect.Option key={el.value} value={el.value}>{el.label}</TagSelect.Option>
                                            )
                                        })
                                    }
                                </TagSelect>
                            </Form.Item>
                        </StandardFormRow>
                        <StandardFormRow
                            title="地区"
                            block
                            style={{
                                border: "none"
                            }}

                        >
                            <Form.Item name="provinceIdList">
                                <TagSelect expandable hideCheckAll={true}>
                                    {
                                        provinceList?.map(el => {

                                            return (
                                                <TagSelect.Option key={el.value} value={el.value}>{el.label}</TagSelect.Option>
                                            )
                                        })
                                    }
                                </TagSelect>
                            </Form.Item>
                        </StandardFormRow>


                    </Form>
                </div>
                <div className={styles.numOptios}>
                    <div className={styles.leftOptions}>
                        <div style={{ color: `${isDefault ? "#1890ff" : "#000"}`, padding: 0, marginRight: 15, cursor: "pointer" }} onClick={() => {
                            cid(true);
                            cs({
                                ...searchForm,
                                isClick: false,
                                priceSort: ""
                            });
                        }}>默认</div>
                        <div className={styles.price} onClick={() => {
                            cs({
                                ...searchForm,
                                isClick: true,
                                priceSort: (!searchForm.priceSort || searchForm.priceSort == 1) ? 2 :1
                            });
                            cid(false);
                        }}>
                            <span>价格</span>
                            <SwapLeftOutlined rotate={-90} style={{ color: `${searchForm.isClick && searchForm.priceSort == 2 ? "#1890ff" : "#000"}`, fontSize: 18 }} />
                            <SwapLeftOutlined rotate={90} style={{ color: `${searchForm.isClick && searchForm.priceSort ==1 ? "#1890ff" : "#000"}`, marginLeft: -10, fontSize: 18 }} />
                        </div>
                        <Divider type="vertical" />
                        <div style={{ marginRight: 40, marginLeft: 20 }}>
                            价格区间 <InputNumber placeholder="￥" min={0} value={searchForm.minPrice} size="small" onChange={(e) => changePrice(e, "minPrice")} /> — <InputNumber placeholder="￥" onChange={(e) => changePrice(e, "maxPrice")} value={searchForm.maxPrice} min={0} size="small" />
                        </div>
                        <div>
                            起订量<InputNumber onChange={(e) => changePrice(e, "minOrderQuantity")} value={searchForm.minOrderQuantity} min={0} size="small" style={{ marginLeft: 10, marginRight: 10 }} />以下
            </div>
                    </div>
                    <div className={styles.rightOptions}>
                        <ShowWay />
                    </div>
                </div>
                {
                    searchForm.seoKeywordSearch &&
                    <div className={styles.result}>
                        <span style={{ marginRight: 20 }}>共找到 12121条</span>
                        <span>搜索关键字：{searchForm.seoKeywordSearch}</span>
                    </div>
                }
            </div>
            <div className={`${styles.list} ulBox`}>
                {
                    productList && productList.length ?

                        showWay == "square" ?
                            <div style={{ width: 1200, margin: "0 auto" }}>
                                <ul style={{ overflow: "hidden", width: 1215 }}>
                                    {
                                        productList.map(it => {
                                            return <li key={it.id} className="liItem">
                                                <div className="liDiv">
                                                    <img className="liImg" src={it.productImageUrlList && it.productImageUrlList.length ? it.productImageUrlList[0].url : require("@/assets/default.png")} />
                                                    <div className="liText">
                                                        <div style={{ color: `${it.isDiscuss == 1 ? "#bbb" :"#ff4800" }`, fontWeight: 500, marginBottom: 5 }}>{it.isDiscuss == 1 ? "面议" : `￥${it.minPrice} ~ ￥ ${it.maxPrice}`}</div>
                                                        <div className="description" title={it.productName}>{it.productName}</div>
                                                        <div className="bottomText" style={{ display: "flex", justifyContent: "space-between" }}>
                                                            <div style={{ display: "flex", alignItems: "center" }}>
                                                                <Icon type="ordered-list" style={{ fontSize: 12, marginRight: 5, color: "#ff4800" }} />
                                                                <div className="oneLine" title={it.companyName}>{it.companyName}</div>
                                                            </div>
                                                            <div className="oneline" title={`${it.provinceName} ${it.cityName}`}>{`${it.provinceName} ${it.cityName}`}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        })
                                    }
                                </ul>
                            </div>
                            :
                            <ul className="content" style={{ overflow: "hidden" }}>
                                {
                                    productList.map(it => {
                                        return <li key={it.id} className={styles.liItemRow}>
                                            <div className={styles.liDivRow}>
                                                <div className={styles.leftContent}>
                                                    <img className={styles.liImgRow} src={it.productImageUrlList && it.productImageUrlList.length ? it.productImageUrlList[0].url : require("@/assets/default.png")} />
                                                    <div className={styles.descriptionRow} title={it.productName}>{it.productName}</div>
                                                </div>
                                                <div className={styles.rightConetnt}>
                                                    <div style={{ color: `${it.isDiscuss == 1 ? "#bbb" :"#ff4800" }`, fontWeight: 500, marginRight: 30 }}>{it.isDiscuss == 1 ? "面议" : `￥${it.minPrice} ~ ￥ ${it.maxPrice}`}</div>
                                                    <Icon type={it.icon} style={{ fontSize: 12, marginRight: 5, color: "#ff4800" }} />
                                                    <div className={styles.oneLine} title={it.companyName} style={{ marginRight: 20 }}>{it.companyName}</div>
                                                    <div style={{width:120}} className="oneline" title={`${it.provinceName} ${it.cityName}`}>{`${it.provinceName} ${it.cityName}`}</div>
                                                </div>
                                            </div>
                                        </li>
                                    })
                                }
                            </ul>
                        :
                        <Empty description="暂无数据" />
                }
            </div>

            <div className={`${styles.page} content rowcenter`}>
                <Pagination
                    total={85}
                    showSizeChanger
                    showQuickJumper
                    showTotal={total => `共 ${total} 条`}
                    onChange={(page, pageSize) => {
                        cs({
                            ...searchForm,
                            pageSize,
                            pageIndex: page
                        })
                    }}
                    pageSize={searchForm.pageSize}
                    current={searchForm.pageIndex}
                />
            </div>


        </div>

    )
}

export default connect(({ global }) => ({
    showWay: global.showWay
}))(Prod)